import React from 'react';
import '../../static/setting/index.styl'
import {Icon, Modal, Button, Form, Input, message,} from 'antd';
import axios from 'axios'

const FormItem = Form.Item;
const {TextArea} = Input;

function Title() {
  return <div>
    <div className="modalTitle">
      <Icon type="plus" style={{fontSize: '24px', color: '#007be2'}}/>
    </div>
    <span>修改首页模块</span>
  </div>
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: props.data,
    }
  }

  hideModal = () => {
    this.props.onHide()
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields(async (err, values) => {
      if (!err) {
        let res = await
          axios.post('vrv-monitor-platform-web/module/update', {
            id: this.props.data.id,
            moduleType:0,
            moduleName: values.moduleName,
            remark: values.remark,
            description: values.description,
          })
        if (res.data.statusCode === 200) {
          message.success("修改成功")
          this.props.refresh()
          this.hideModal()
        } else {
          message.error(res.data.message)
        }
      }
    });
  }

  initForm = () => {
    this.props.form.setFieldsValue({
      moduleName: this.props.data.moduleName,
      remark: this.props.data.remark,
      description: this.props.data.description,
    });
  }

  componentDidMount() {
    this.initForm();
  }

  render() {
    const {getFieldDecorator} = this.props.form;
    const formItemLayout = {
      labelCol: {span: 6},
      wrapperCol: {span: 16},
    }
    const buttonItemLayout = {
      wrapperCol: {span: 20, offset: 2}
    }
    return (
      <Modal
        title={<Title/>}
        visible={true}
        footer={null}
        onCancel={this.hideModal}
      >
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            label="模块名称"
            {...formItemLayout}
          >
            {getFieldDecorator('moduleName', {
              rules: [{required: true, message: '模块名称不能为空!'}],
            })(
              <Input placeholder="请输入首页模块名称"/>
            )}
          </FormItem>
          <FormItem
            label="相关关键词"
            {...formItemLayout}
          >
            {getFieldDecorator('remark', {
              rules: [{required: true, message: '关键词名称不能为空!'}],
            })(
              <Input placeholder="请输入首页模块名称"/>
            )}
          </FormItem>
          <FormItem
            label="关键词描述"
            {...formItemLayout}
          >
            {getFieldDecorator('description', {
              // rules: [{required: true, message: '关键词名称不能为空!'}],
            })(
              <TextArea rows={4} placeholder="请输入关键词描述"/>
            )}
          </FormItem>
          <FormItem {...buttonItemLayout} style={{textAlign: 'right', marginBottom: 0}}>
            <Button onClick={this.hideModal}>取消</Button>
            <Button type="primary" style={{marginLeft: '20px'}} htmlType="submit">确认</Button>
          </FormItem>
        </Form>
      </Modal>
    );
  }
}

const EditModule = Form.create()(App);
export default EditModule